<template>
    <div>
        <van-grid clickable :column-num="1" v-for="item in list" :key="item.id" class="brand-list">
            <van-grid-item @click="goDetail(item.id)" class="brand-item">
                <img :src="item.app_list_pic_url" alt="" class="brand-img">
                <p class="brand-name">{{item.name}}</p>
                <p class="brand-price">{{item.floor_price}}起</p>
            </van-grid-item>
          </van-grid>
    </div>
</template>

<script>
import {brand} from "@/axios/index.js"
export default {
    name: 'brand',

    data() {
        return {
            page:1,
            list:[]
        };
    },
    async created(){
        let  res= await brand({'page':this.page});
        this.list=res.data
        console.log(this.list);
    },
    mounted() {
        
    },

    methods: {
        goDetail(id){
            this.$router.push({name:"brandDetail",params:{'id':id}})
        }
    },
};
</script>

<style scoped lang="scss">
    .brand-list{
        width: 710px;
        margin: 20px auto;
    }
    .brand-img{
        width: 710px;
        height: 400px;
    }
</style>